How to add an icon as a placeholder in the input email box in bootstrap?

Question

Ashutosh Kumar Verma · Answer

To set an icon as a placeholder in an input box using Bootstrap, you can use the following approach.
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
   andlt;meta charset="UTF-8">
   andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
   andlt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   andlt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   andlt;title>Email Input with Iconandlt;/title>
   andlt;style>
       .input-icon {
           position: relative;
       }
       .input-icon input {
           padding-left: 30px; /* Space for the icon */
       }
       .input-icon i {
           position: absolute;
           left: 10px;
           top: 50%;
           transform: translateY(-50%);
           color: #6c757d; /* Bootstrap's secondary color */
       }
   andlt;/style>
andlt;/head>
andlt;body>
andlt;div class="container mt-5">
   andlt;h2>Set icon in input fieldandlt;/h2>
   andlt;div class="input-icon">
       andlt;i class="fas fa-envelope">andlt;/i>
       andlt;input type="email" class="form-control" placeholder="Email address" aria-label="Email address">
   andlt;/div>
andlt;/div>
andlt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">andlt;/script>
andlt;/body>
andlt;/html>
and

interview

How to add an icon as a placeholder in the input email box in bootstrap?

Ashutosh Kumar Verma

Can you answer this question?

1 Answers

Liked By